/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unused-state */
/* eslint-disable array-callback-return */
/* eslint-disable no-param-reassign */
/* eslint-disable no-return-assign */
/* eslint-disable jsx-a11y/alt-text */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  DownloadOutlined,
  DownOutlined,
  UpOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Row,
  Col,
  Card,
  Input,
  Button,
  Modal,
  message,
  Badge,
  Tabs,
  Tooltip,
  DatePicker,
  Radio,
  Select,
} from 'antd';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import ProTable from '@/pages/components/Problem/ProblemPage/ProTable';
import ProExportBtn from '@/pages/components/Problem/ProblemPage/ProExportBtn';
import Authorized from '@/utils/Authorized';
import styles from '@/utils/utils.less';
import downloadFile, { urlParse, getProPagination } from '@/utils/utils';
import SendOrderCustomer from '../../components/SendOrderCustomer';
import SendRecvSupplier from '../../components/SendRecvSupplier';
import Area from '../../components/Area';
import proIcon from '../../../assets/proIcon.png';
import TextOverFlow from '../../components/TextOverFlow';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const { Option } = Select;

@connect(({ adjusttasksend, loading }) => ({
  loading: loading.models.adjusttasksend,
  tabList: adjusttasksend.tabList,
  activeKey: adjusttasksend.activeKey,
  pageData: adjusttasksend.pageData,
  formFieldsValue: adjusttasksend.formFieldsValue,
  expandForm: adjusttasksend.expandForm,
  editFlag: adjusttasksend.editFlag,
  downloadParams: adjusttasksend.downloadParams,
}))
@Form.create()
class TableList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      formValues: {},
      selectedRows: [],
      selectedRowKeys: [],
      taskSourceList: [],
      proTable: {},
    };
    this.tableSearchLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
  }

  componentDidMount() {
    const {
      pageData: { pagination },
      location,
      activeKey = '2',
      dispatch,
    } = this.props;
    const { queryParam } = location;
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'adjusttasksend/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    const { isMenuLink } = urlParse(location.search);
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['SEND_ADJ_TYPE'],
    }).then(data => {
      let taskSourceList = [];
      if (data && data.SEND_ADJ_TYPE && data.SEND_ADJ_TYPE.length) {
        taskSourceList = data.SEND_ADJ_TYPE.filter(
          item => item.itemCode === '1' || item.itemCode === '2'
        );
      }
      this.setState({ taskSourceList });
    });
    // if (isMenuLink) {
    //   this.resetAndGeLlist(location);
    // } else {
    //   this.getList(tempActiveKey, pagination.current, pagination.pageSize);
    // }
    const proPagination = getProPagination(tempActiveKey, '5', pagination);
    if (isMenuLink) {
      this.resetAndGeLlist(location);
    } else {
      this.getList(tempActiveKey, proPagination.current, proPagination.pageSize);
    }
  }

  // 获取列表
  getList = (activeKey = '2', currentPage = 1, pageSize = 10, editFlag, isClear = true) => {
    if (isClear) {
      this.setState({ selectedRows: [], selectedRowKeys: [] });
    }
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'adjusttasksend/updateTabListQuery',
        payload: { formFieldsValue: fieldsValue, activeKey },
      });
      const formFieldsValue = {};
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'empName' || key === 'idCode') {
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        if (key === 'operTime') {
          formFieldsValue.operTimeStart =
            (fieldsValue.operTime &&
              fieldsValue.operTime[0] &&
              fieldsValue.operTime[0].format('YYYY-MM-DD')) ||
            null;
          formFieldsValue.operTimeEnd =
            (fieldsValue.operTime &&
              fieldsValue.operTime[1] &&
              fieldsValue.operTime[1].format('YYYY-MM-DD')) ||
            null;
        }
        formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
        delete formFieldsValue.operTime;
      });
      const pageArg = { currentPage, pageSize };
      if (editFlag === 'null') {
        editFlag = null;
      }
      const values = {
        busiType: '3',
        hdlState: activeKey,
        ...formFieldsValue,
        editFlag, // 有无修改
        pageArg,
      };

      const downloadParams = {
        ...formFieldsValue,
        busiType: 13,
        hdlState: activeKey,
        editFlag,
      };
      dispatch({
        type: 'adjusttasksend/updateModelData',
        payload: {
          downloadParams,
        },
      });
      if (activeKey && Number(activeKey) === 5) {
        setTimeout(() => {
          const { proTable } = this.state;
          const proFormFieldsValue = { ...formFieldsValue, busiType: 13 };
          if (proTable.searchList) {
            proTable.searchList(proFormFieldsValue, currentPage, pageSize);
          }
        });
      } else {
        dispatch({
          type: 'adjusttasksend/fetchList',
          payload: values,
        });
      }

      // if (activeKey === '5') {
      //   // 问题人员列表
      //   dispatch({
      //     type: 'adjusttasksend/fetchProbList',
      //     payload: {
      //       ...values,
      //       busiType: '3',
      //     },
      //   });
      // } else {
      //   dispatch({
      //     type: 'adjusttasksend/fetchList',
      //     payload: values,
      //   });
      // }
      this.setState({
        formValues: values,
      });
    });
  };

  // 获取页签数量
  getTabNum = (activeKey, currentPage = 1, pageSize = 10) => {
    const { dispatch, form, tabList, editFlag } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const newTabList = tabList.map(item => ({ ...item, isHasBadge: false }));
      dispatch({
        type: 'addemp/updateModelData',
        payload: { tabList: newTabList },
      });
      dispatch({
        type: 'adjusttasksend/updateTabListQuery',
        payload: { formFieldsValue: fieldsValue, activeKey },
      });
      const formFieldsValue = {};
      Object.keys(fieldsValue).forEach(key => {
        if (key === 'empName' || key === 'idCode') {
          fieldsValue[key] = (fieldsValue[key] && fieldsValue[key].trim()) || null;
        }
        if (key === 'operTime') {
          formFieldsValue.operTimeStart =
            (fieldsValue.operTime &&
              fieldsValue.operTime[0] &&
              fieldsValue.operTime[0].format('YYYY-MM-DD')) ||
            null;
          formFieldsValue.operTimeEnd =
            (fieldsValue.operTime &&
              fieldsValue.operTime[1] &&
              fieldsValue.operTime[1].format('YYYY-MM-DD')) ||
            null;
        }
        formFieldsValue[key] = fieldsValue[key] === undefined ? null : fieldsValue[key];
        delete formFieldsValue.operTime;
      });
      const checkHasValue = Object.keys(fieldsValue).some(
        key => Boolean(fieldsValue[key]) !== false
      );
      if (!checkHasValue) {
        this.getList(activeKey, currentPage, pageSize);
        return;
      }
      this.setState({
        selectedRows: [],
        selectedRowKeys: [],
      });
      const values = {
        ...formFieldsValue,
      };

      if (activeKey === 5) {
        const downloadParams = {
          ...formFieldsValue,
          busiType: 13,
          hdlState: activeKey,
          editFlag,
        };
        dispatch({
          type: 'adjusttasksend/updateModelData',
          payload: {
            downloadParams,
          },
        });
      }

      dispatch({
        type: 'adjusttasksend/fetchTabNum',
        payload: { formFieldsValue: values, currentPage, pageSize },
      });
    });
  };

  // 切换表格展开收起
  toggleForm = () => {
    const { dispatch, expandForm } = this.props;
    dispatch({
      type: 'adjusttasksend/updateModelData',
      payload: { expandForm: !expandForm },
    });
  };

  // 点击复选框
  handleSelectRows = (selectedRows, selectedRowKeys) => {
    this.setState({ selectedRows, selectedRowKeys });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { activeKey } = this.props;
    this.getList(activeKey, pagination.current, pagination.pageSize, undefined, false);
  };

  // 重置
  resetSearch = () => {
    const { form, dispatch } = this.props;
    dispatch({
      type: 'adjusttasksend/updateModelData',
      payload: { formFieldsValue: {} },
    });
    form.resetFields();
    form.setFieldsValue({ operTime: null });
  };

  // 切换页签
  changeTabPane = activeKey => {
    this.setState({ selectedRows: [], selectedRowKeys: [] }, () => {
      this.getList(activeKey);
    });
    router.push({
      pathname: '/sendordermanage/adjusttask/index',
      query: {
        activeKey,
      },
    });
  };

  // 导出
  export = () => {
    // eslint-disable-next-line react/destructuring-assignment
    if (!this.state.selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: '温馨提示',
        content: '如果不选择列表数据，则默认导出当前条件下所有数据',
        okText: '导出',
        cancelText: '取消',
        onOk: () => {
          this.exportExcel();
        },
      });
    } else {
      this.exportExcel();
    }
  };

  // 导出excel
  exportExcel = () => {
    const { activeKey } = this.props;
    const { selectedRowKeys, formValues } = this.state;
    delete formValues.pageArg;
    if (activeKey === '5') {
      // 问题人员
      const params = {
        detIds: (selectedRowKeys.length && selectedRowKeys) || null,
        ...formValues,
        busiType: '3',
      };
      downloadFile(params, '/nsApi/sendProb/export', 'POST');
    } else {
      const params = {
        sendAdjTaskIds: (selectedRowKeys.length && selectedRowKeys) || null,
        ...formValues,
      };
      downloadFile(params, '/nsApi/sendService/adjs/export', 'POST');
    }
  };

  // 取消更换协议
  cancelChangeProt = () => {
    const { selectedRowKeys, selectedRows } = this.state;
    const { dispatch, activeKey } = this.props;
    if (selectedRowKeys.length) {
      Modal.confirm({
        icon: <QuestionCircleOutlined />,
        title: `你确定要取消更换协议吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          dispatch({
            type: 'adjusttasksend/cancelChangeProt',
            payload: { taskIds: selectedRowKeys },
          }).then(response => {
            if (response.success) {
              this.getList(activeKey);
              message.success('取消更换协议成功！');
            } else {
              message.warning(`${response.message || '取消更换协议失败！'}`);
            }
          });
        },
      });
    } else {
      message.warning('请至少选择一条数据！');
    }
  };

  // 有无修改
  editFlag = e => {
    e.preventDefault();
    const {
      dispatch,
      activeKey,
      pageData: { pagination },
    } = this.props;
    dispatch({
      type: 'adjusttasksend/updateModelData',
      payload: { editFlag: e.target.value === 'null' ? null : e.target.value },
    });
    this.getList(activeKey, pagination.current, pagination.pageSize, e.target.value);
  };

  // 重置查询条件并获取列表
  async resetAndGeLlist(location) {
    const { dispatch, tabList } = this.props;
    const { queryParam } = location;

    if (queryParam) {
      await dispatch({
        type: 'adjusttasksend/updateModelData',
        payload: {
          expandForm: true,
        },
      });
    } else {
      const newTabList = tabList.map(item => ({ ...item, isHasBadge: false }));
      dispatch({
        type: 'adjusttasksend/updateModelData',
        payload: { expandForm: false, tabList: newTabList },
      });
    }
    await this.resetSearch();
    await this.getList(location.query.activeKey, undefined, undefined, queryParam);
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      formFieldsValue,
    } = this.props;
    const { activeKey } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="接单方">
              {getFieldDecorator('recvCropId', {
                initialValue: formFieldsValue.recvCropId,
              })(<SendRecvSupplier allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="执行地区">
              {getFieldDecorator('cityId', {
                initialValue: formFieldsValue.cityId,
              })(<Area allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit" onClick={() => this.getTabNum(activeKey)}>
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <DownOutlined />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      formFieldsValue,
      activeKey,
    } = this.props;
    const { taskSourceList } = this.state;
    return (
      <Form layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="接单方">
              {getFieldDecorator('recvSuppId', {
                initialValue: formFieldsValue.recvSuppId,
              })(<SendRecvSupplier allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="执行地区">
              {getFieldDecorator('cityId', {
                initialValue: formFieldsValue.cityId,
              })(<Area allowClear />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="客户名称">
              {getFieldDecorator('custId', {
                initialValue: formFieldsValue.custId,
              })(<SendOrderCustomer allowClear />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="姓名">
              {getFieldDecorator('empName', {
                initialValue: formFieldsValue.empName,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="证件号">
              {getFieldDecorator('idCode', {
                initialValue: formFieldsValue.idCode,
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="调整类型">
              {getFieldDecorator('adjType', {
                initialValue: formFieldsValue.taskSource,
              })(
                <Select placeholder="请选择" showSearch optionFilterProp="children" allowClear>
                  {taskSourceList.map(item => (
                    <Option key={item.itemCode}>{item.itemName}</Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem {...this.tableSearchLayout} label="操作时间">
              {getFieldDecorator('operTime', {
                initialValue: formFieldsValue.operTime,
              })(
                <RangePicker
                  placeholder={['操作开始日期', '操作结束日期']}
                  style={{ width: '100%' }}
                  format="YYYY-MM-DD"
                />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24} />
          <Col md={8} sm={24}>
            <div style={{ overflow: 'hidden' }}>
              <div style={{ float: 'right', marginBottom: 24 }}>
                <Button type="primary" htmlType="submit" onClick={() => this.getTabNum(activeKey)}>
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.resetSearch}>
                  重置
                </Button>
                <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                  收起
                  <UpOutlined />
                </a>
              </div>
            </div>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    const { expandForm } = this.props;
    return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
  }

  render() {
    const { pageData, loading, tabList, activeKey, editFlag, downloadParams } = this.props;
    const { selectedRows, selectedRowKeys } = this.state;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '调整类型',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '发单时间',
        dataIndex: 'sendTime',
        sorter: (a, b) => new Date(b.operTime) - new Date(a.operTime),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && moment(val).format('YYYY-MM-DD HH:mm')) || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <span>
            <a
              onClick={() =>
                router.push(
                  `/sendordermanage/adjusttask/detail?sendOrdAdjTaskId=${
                    record.sendOrdAdjTaskId
                  }&adjType=${record.adjType}`
                )
              }
            >
              查看
            </a>
          </span>
        ),
      },
    ];
    const columnsReceived = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '调整类型',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '接单时间',
        dataIndex: 'recvTime',
        sorter: (a, b) => new Date(b.operTime) - new Date(a.operTime),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && moment(val).format('YYYY-MM-DD HH:mm')) || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <a
            onClick={() =>
              router.push(
                `/sendordermanage/adjusttask/detail?sendOrdAdjTaskId=${
                  record.sendOrdAdjTaskId
                }&adjType=${record.adjType}`
              )
            }
          >
            查看
          </a>
        ),
      },
    ];
    const columnsReplied = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '调整类型',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '有无修改',
        dataIndex: 'editFlagName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '回单时间',
        dataIndex: 'returnTime',
        sorter: (a, b) => new Date(b.operTime) - new Date(a.operTime),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && moment(val).format('YYYY-MM-DD HH:mm')) || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <a
            onClick={() =>
              router.push(
                `/sendordermanage/adjusttask/detail?sendOrdAdjTaskId=${
                  record.sendOrdAdjTaskId
                }&adjType=${record.adjType}`
              )
            }
          >
            查看
          </a>
        ),
      },
    ];
    // const columnsProblem = [
    //   {
    //     title: '姓名',
    //     dataIndex: 'empName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '证件号',
    //     dataIndex: 'idCode',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '客户名称',
    //     dataIndex: 'custName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //     render: text => <TextOverFlow text={text} />,
    //   },
    //   {
    //     title: '接单方',
    //     dataIndex: 'recvSuppName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //     render: text => <TextOverFlow text={text} />,
    //   },
    //   {
    //     title: '问题对象',
    //     dataIndex: 'probObj',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '问题类型',
    //     dataIndex: 'probTypeIdName',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
    //   },
    //   {
    //     title: '操作',
    //     dataIndex: 'operation',
    //     onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
    //     onCell: () => ({ style: { textAlign: 'center' } }),
    //     render: (text, record) => (
    //       <a
    //         onClick={() => router.push(`/sendordermanage/adjusttask/problem?detId=${record.detId}`)}
    //       >
    //         查看
    //       </a>
    //     ),
    //   },
    // ];
    const columnsCanceled = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) =>
          record.probFlag === 1 ? (
            <Tooltip
              placement="top"
              title={
                <div>
                  <p>
                    问题人员类型：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeName : '--'}
                  </p>
                  <p>
                    问题说明：
                    {record.probDets && record.probDets[0] ? record.probDets[0].probTypeDesc : '--'}
                  </p>
                </div>
              }
            >
              <span>
                {text}
                <img src={proIcon} />
              </span>
            </Tooltip>
          ) : (
            <span>{text}</span>
          ),
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '接单方',
        dataIndex: 'recvSuppName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => <TextOverFlow text={text} />,
      },
      {
        title: '调整类型',
        dataIndex: 'adjTypeName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '取消时间',
        dataIndex: 'cancelTime',
        sorter: (a, b) => new Date(b.operTime) - new Date(a.operTime),
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && moment(val).format('YYYY-MM-DD HH:mm')) || '--',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        onHeaderCell: () => ({ style: { fontWeight: 'bold', width: 150, textAlign: 'center' } }),
        onCell: () => ({ style: { textAlign: 'center' } }),
        render: (text, record) => (
          <a
            onClick={() =>
              router.push(
                `/sendordermanage/adjusttask/detail?sendOrdAdjTaskId=${
                  record.sendOrdAdjTaskId
                }&adjType=${record.adjType}`
              )
            }
          >
            查看
          </a>
        ),
      },
    ];
    const sensed = (
      <div>
        <Row>
          <Authorized authority="ns:sendAdj:export" noMatch={null}>
            <Button
              type="primary"
              style={{ marginRight: 8, marginBottom: 16 }}
              icon={<DownloadOutlined />}
              onClick={this.export}
            >
              导出
            </Button>
          </Authorized>
          <Authorized authority="ns:sendAdj:adjProt" noMatch={null}>
            <Button
              onClick={() => {
                router.push('/sendordermanage/adjusttask/changeprotocol');
              }}
              style={{ marginRight: 8, marginBottom: 16 }}
            >
              更换协议
            </Button>
          </Authorized>
          <Authorized authority="ns:sendAdj:cancelProt" noMatch={null}>
            <Button onClick={this.cancelChangeProt} style={{ marginBottom: 16 }}>
              取消更换协议
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="sendOrdAdjTaskId"
          columns={columns}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const received = (
      <div>
        <Authorized authority="ns:sendAdj:export" noMatch={null}>
          <Button
            type="primary"
            style={{ marginRight: 8, marginBottom: 16 }}
            icon={<DownloadOutlined />}
            onClick={this.export}
          >
            导出
          </Button>
        </Authorized>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="sendOrdAdjTaskId"
          columns={columnsReceived}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const replied = (
      <div>
        <div style={{ marginBottom: 16 }}>
          <Authorized authority="ns:sendAdj:export" noMatch={null}>
            <Button
              type="primary"
              style={{ marginRight: 8 }}
              icon={<DownloadOutlined />}
              onClick={this.export}
            >
              导出
            </Button>
          </Authorized>
          <div style={{ float: 'right' }}>
            <RadioGroup className={styles.floatRight} value={editFlag} onChange={this.editFlag}>
              <RadioButton value="null">全部</RadioButton>
              <RadioButton value={2}>无修改</RadioButton>
              <RadioButton value={1}>有修改</RadioButton>
            </RadioGroup>
          </div>
        </div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="sendOrdAdjTaskId"
          columns={columnsReplied}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const problem = (
      <div>
        <div style={{ marginBottom: '16px' }}>
          <Authorized noMatch={null} authority="ns:sndrAdjProb:addProbFdbk">
            <Button
              type="primary"
              onClick={() => router.push('/sendordermanage/adjusttask/batchfeedback?busiType=13')}
              style={{ marginRight: 8 }}
            >
              批量反馈
            </Button>
          </Authorized>
          <Authorized noMatch={null}>
            <ProExportBtn selectedRowKeys={selectedRowKeys} downloadParams={downloadParams} />
          </Authorized>
        </div>
        <ProTable
          onRef={e => {
            this.setState({ proTable: e });
          }}
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          onSelectRow={this.handleSelectRows}
          proUrl="/sendordermanage/adjusttask/problem"
          busiType="13"
        />
      </div>
    );
    const canceled = (
      <div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="sendOrdAdjTaskId"
          columns={columnsCanceled}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    // 获取页签组件
    const getTabPane = key => {
      switch (key) {
        case '2':
          return sensed;
        case '3':
          return received;
        case '4':
          return replied;
        case '5':
          return problem;
        case '6':
          return canceled;
        default:
          return <div />;
      }
    };
    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            <Tabs activeKey={activeKey} onChange={this.changeTabPane}>
              {tabList.map(pane => (
                <TabPane
                  tab={<Badge dot={pane.isHasBadge}>{pane.itemName}</Badge>}
                  key={pane.itemCode}
                >
                  {getTabPane(pane.itemCode)}
                </TabPane>
              ))}
            </Tabs>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default TableList;
